<template>
    <div id="doegpe" :style="cssVars">
        电机{{start}}<div class="inner-blk">{{mo1-1000}}</div>
        电机{{start+1}}<div class="inner-blk">{{mo2-1000}}</div>
        电机{{start+2}}<div class="inner-blk">{{mo3-1000}}</div>
        电机{{start+3}}<div class="inner-blk">{{mo4-1000}}</div>
    </div>
</template>

<script setup>
    import {ref, reactive, computed } from 'vue'

    const props=defineProps({
        mo1:Number,
        mo2:Number,
        mo3:Number,
        mo4:Number,
        start:Number
    })

    const cssVars=computed(()=>{
          return{
              "--hh1": (props.mo1-1000)/8 + 16 + 'px',
              "--hh2": (props.mo2-1000)/8 + 16 + 'px',
              "--hh3": (props.mo3-1000)/8 + 16 + 'px',
              "--hh4": (props.mo4-1000)/8 + 16 + 'px'
          }
    })

</script>

<style scoped>
    #doegpe{
        display: flex;
        justify-content: space-around; /*主轴上排列方式*/
        align-items: flex-end; /*交叉轴上的对齐方式*/
        height: 5em;
        overflow: hidden;
        vertical-align: bottom;
    }
    .inner-blk:nth-child(1){
        height: var(--hh1);
    }
    .inner-blk:nth-child(2){
        height: var(--hh2);
    }
    .inner-blk:nth-child(3){
        height:var(--hh3);
    }
    .inner-blk:nth-child(4){
        height: var(--hh4);
    }
    .staas{
        display: inline-block;

        list-style: none;
    }
    .inner-blk{
        display: inline-block;
        margin-right: 1.2em;
        border: 1px solid palevioletred;
        background-color: palevioletred;
        width: 3em;
        max-height: 5em;
    }
</style>
